
import React from 'react';
import { timeData } from 'js/core/timeData';
import { DatePicker, Picker, Icon } from 'antd-mobile';
import echarts from 'js/lib/echarts';
import SelectTimeType from 'views/component/selectTimeType/selectTimeType';
import moment from 'moment';
import api from 'js/api/index';
import SelectRadioItem from 'views/component/radioOne/radio';
import { SubViewLink } from 'views/component/subViewLink/subViewLink';
import { i18n } from 'js/core/i18n';
import './multiStoreFlow.scss';
import './flow.scss';

class FlowPlateauEffectRentTrendChart extends React.Component {
  constructor() {
    super()
    this.state = {
      data: null,
      timetype: 'day',
      year: moment().year(),
      loading: true
    }
  }
  componentDidMount() {
    this.query = {
      year: moment().year(),
      DataType: 5,
      DataTypeID: 0
    }
    this.getData()
  }
  getData = async () => {
    let PlateauEffectDataYs = [], RentTrendDataYs = [], PlateauEffectDataX = [], RentTrendDataX = [];
    if (this.chart1) {
      this.chart1.dispose();
    }
    this.setState({ loading: true })
    for (const id of this.props.ShopIdList) {
      this.query.DataTypeID = id.ShopId;
      const response = api('/Flow/FlowPlateauEffectRentTrendChart', this.query);
      let data = await response;
      PlateauEffectDataX = data.data.PlateauEffect.dataX;
      RentTrendDataX = data.data.RentTrend.dataX;
      PlateauEffectDataYs.push(data.data.PlateauEffect.dataY);
      RentTrendDataYs.push(data.data.RentTrend.dataY);
    }
    this.setChart(PlateauEffectDataX, RentTrendDataX, PlateauEffectDataYs, RentTrendDataYs)
  }
  setChart = (PlateauEffectDataX, RentTrendDataX, PlateauEffectDataYs, RentTrendDataYs) => {
    this.setState({ loading: false })
    let series1 = PlateauEffectDataYs.map((item, index) => {
      return {
        name: this.props.shopNames[index],
        type: 'line',
        label: { normal: { show: true, color: '#666' } },
        data: item
      }
    });
    let option1 = this.getOption(PlateauEffectDataX, series1)
    this.chart1 = echarts.init(this.refs.chart1);
    this.chart1.setOption(option1);

    let series2 = RentTrendDataYs.map((item, index) => {
      return {
        name: this.props.shopNames[index],
        type: 'line',
        label: { normal: { show: true, color: '#666' } },
        data: item
      }
    });
    let option2 = this.getOption(RentTrendDataX, series2)
    this.chart2 = echarts.init(this.refs.chart2);
    this.chart2.setOption(option2);
  }
  getOption = (dataX, series) => {
    return {
      textStyle: { fontSize: window.chatFontSize },
      color: ['#ffc397', '#beb0f9', '#92d0ff'],
      grid: {
        left: '9%',
        top: '20%',
        width: '82%',
        height: '70%',
      },
      legend: {
        data: this.props.shopNames,
      },
      xAxis: {
        type: 'category',
        data: dataX,
        boundaryGap: false,
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: true, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: false, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      dataZoom: {
        type: 'inside',
        zoomLock: true,
        startValue: dataX.length - 7,
        endValue: dataX.length - 1
      },
      series: series
    }
  }
  yearOnChange = (date) => {
    this.query.year = moment(date).year();
    this.setState({ year: moment(date).year() }, () => {
      this.getData();
    })
  }
  render() {
    let { year, loading } = this.state;
    return <div className="box">
      <div className="boxHead flex-vcenter">
        <div className="title">{i18n.get("坪效走势图")}</div>
        <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
      </div>
      <DatePicker extra={i18n.get("请选择")} locale={{ DatePickerLocale: { year: i18n.get("年"), month: i18n.get("月"), day: i18n.get("日"), hour: i18n.get("时"), minute: i18n.get("分") } }} okText={i18n.get("确定")} dismissText={i18n.get("取消")} mode="year" value={new Date((new Date()).setFullYear(year))} onChange={this.yearOnChange}>
        <div className="selectYear flex-center">
          {i18n.get('年份选择')}:{year}
        </div>
      </DatePicker>
      <div className="chart" ref="chart1">
        {loading && <div className="loading"></div>}
      </div>
      <div className="chartTitle">{i18n.get("单人次客流租金走势图")}</div>
      <div className="chart" ref="chart2">
        {loading && <div className="loading"></div>}
      </div>
    </div>
  }
}


class FlowActivity extends React.Component {
  constructor() {
    super()
    this.HolidayListObject = {};
    this.state = {
      data: null,
      timeType: 'day',
      year: moment().year(),
      loading: true
    }
  }
  componentDidMount() {
    this.query = {
      timeType: 'day',
      year: moment().year(),
      DataType: 5,
      DataTypeID: this.props.id,
      counttype: this.props.counttype,
    }
    this.HolidayYearList()
  }
  HolidayYearList = () => {
    let ShopIdList = this.props.ShopIdList.map(item => item.ShopId);
    ShopIdList = ShopIdList.join(',');
    api('/SysBase/HolidayShopYearList', { year: this.state.year, ShopIdList: ShopIdList }).then(data => {
      if (data.data && data.data.length > 0) {
        this.query.HolidayId = data.data[0].HolidayId;
        let HolidayList = data.data.map(item => {
          let d = {}
          d.value = item.HolidayId;
          d.label = item.HolidayName;
          d.startDate = moment(item.HolidayStartDate).format('MM/DD');
          d.endDate = moment(item.HolidayEndDate).format('MM/DD');
          this.HolidayListObject[item.HolidayId] = d;
          return d
        })
        this.startDate = HolidayList[0].startDate;
        this.endDate = HolidayList[0].endDate;
        this.setState({ HolidayList: HolidayList, HolidayId: this.query.HolidayId, HolidayName: data.data[0].HolidayName })
        this.getData();
      } else {
        this.query.HolidayId = null;
        if (this.chart1) {
          this.chart1.dispose();
          this.chart1 = null;
        }
        this.setState({ loading: 'none', HolidayName: i18n.get('暂无活动'), HolidayId: null, HolidayList: [] })
      }

    })
  }
  yearOnChange = (date) => {
    this.query.year = moment(date).year();
    this.setState({ year: moment(date).year() }, () => {
      this.HolidayYearList();
    })
  }
  getData = async () => {
    if (!this.query.HolidayId) {
      this.setState({ loading: 'none', HolidayName: i18n.get('暂无活动'), })
      return
    }
    let dataYs = [], dataX = []
    this.query.counttype = this.props.counttype;
    if (this.chart1) {
      this.chart1.dispose();
    }
    this.setState({ loading: true })
    let startValue = 0;
    for (const id of this.props.ShopIdList) {
      this.query.DataTypeID = id.ShopId;
      const response = api('/Flow/FlowActivity', this.query);
      let data = await response;
      let dataY = [];
      let flag = false;
      dataX = [];
      data.data.CountBlow.dataY.forEach((item, index) => {
        if (data.data.CountBlow.dataX[index] === this.startDate) {
          flag = true;
          startValue = index;
        } else if (data.data.CountBlow.dataX[index] === this.endDate) {
          flag = false;
        }
        if (flag === true || data.data.CountBlow.dataX[index] === this.endDate) {
          dataX.push({
            value: data.data.CountBlow.dataX[index],
            textStyle: {
              color: '#D9251D',
              fontSize: 14
            }
          })
          dataY.push({
            value: item,
            symbolSize: 6,
            label: {
              normal: {
                show: true,
                color: '#D9251D',
                fontSize: 16
              }
            }
          });
        } else {
          dataY.push({
            value: item,
            symbolSize: 2,
            label: {
              normal: {
                show: true,
                color: '#ccc',
                fontSize: 12
              }
            }
          });
          dataX.push(data.data.CountBlow.dataX[index])
        }
      });
      dataYs.push(dataY);
    }
    this.setChart(dataX, dataYs, startValue)
  }
  setChart = (dataX, dataYs, startValue) => {
    this.setState({ loading: false })
    let series = [];
    dataYs.forEach((item, index) => {
      series.push({
        name: this.props.shopNames[index],
        type: 'line',
        label: { normal: { show: true, color: '#666' } },
        data: item
      })
    });
    let option1 = {
      textStyle: { fontSize: window.chatFontSize },
      color: ['#ffc397', '#beb0f9', '#92d0ff'],
      grid: {
        left: '9%',
        top: '20%',
        width: '82%',
        height: '70%',
      },
      legend: {
        data: this.props.shopNames,
      },
      xAxis: {
        type: 'category',
        data: dataX,
        boundaryGap: false,
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: true, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: false, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      dataZoom: {
        type: 'inside',
        zoomLock: true,
        startValue: startValue,
        endValue: startValue + 6
      },
      series: series
    }
    this.chart1 = echarts.init(this.refs.chart1);
    this.chart1.setOption(option1);
  }
  timeTypeOnChange = (value) => {
    this.setState({ timeType: value })
  }
  holidayOnChange = (value) => {
    let id = value[0];
    this.query.HolidayId = id;
    this.startDate = this.HolidayListObject[id].startDate;
    this.endDate = this.HolidayListObject[id].endDate;
    this.setState({ HolidayId: id, HolidayName: this.HolidayListObject[id].label }, () => {
      this.getData()
    })
  }
  render() {
    let { timeType, year, HolidayList, HolidayId, HolidayName, loading } = this.state;
    return <div className="box">
      <div className="boxHead flex-vcenter">
        <div className="title">{i18n.get("活动日客流量分析")}</div>
        <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
      </div>
      <div className="">
        <div className="mb5">
          <DatePicker extra={i18n.get("请选择")} locale={{ DatePickerLocale: { year: i18n.get("年"), month: i18n.get("月"), day: i18n.get("日"), hour: i18n.get("时"), minute: i18n.get("分") } }} okText={i18n.get("确定")} dismissText={i18n.get("取消")} mode="year" value={new Date((new Date()).setFullYear(year))} onChange={this.yearOnChange}>
            <div className="selectYear flex-center">
              {i18n.get('年份选择')}:{year}
            </div>
          </DatePicker>
        </div>
        <div className="">
          <Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")} data={HolidayList} value={[HolidayId]} cols={1} onChange={this.holidayOnChange}>
            <div className="selectYear flex-center">
              {i18n.get('活动选择')}:{HolidayName}
            </div>
          </Picker>
        </div>
      </div>
      <div className="chart" ref="chart1">
        {loading === true && <div className="loading"></div>}
        {loading === 'none' && i18n.get('暂无数据')}
      </div>
    </div>
  }
}

class FlowHotSpotTimeList extends React.Component {
  constructor() {
    super()
    this.state = {
      data: null,
      timeType: 'day',
      year: moment().year(),
      openStatus: false,
      loading: false,
    }
  }
  componentDidMount() {
    let ShopIdList = this.props.ShopIdList.map((item) => {
      return item.ShopId
    })
    this.query = {
      timeType: 'day',
      year: moment().year(),
      counttype: 1, //0-过客量 1-入店量 2-试穿量
      dataType: 5,
      dataTypeID: 0
    }
    this.getData()
  }
  getData = async () => {
    let dataYs = [], dataX = []
    this.query.counttype = this.props.counttype;
    if (this.chart) {
      this.chart.dispose();
    }
    this.setState({ loading: true })
    for (const id of this.props.ShopIdList) {
      this.query.dataTypeID = id.ShopId;
      const response = api('/Flow/FlowHotSpotTimeTopThree', this.query);
      let data = await response;
      dataX = data.data.dataX;
      dataX.forEach((item, index) => {
        dataX[index] = dataX[index].replace('-', '-\n');
      })
      dataYs.push(data.data.dataY);
    }
    this.setChart(dataX, dataYs)
  }
  setChart = (dataX, dataYs) => {
    let series = [];
    dataYs.forEach((item, index) => {
      series.push({
        name: this.props.shopNames[index],
        type: 'line',
        label: { normal: { show: true, color: '#666' } },
        data: item
      })
    });

    this.chart = echarts.init(this.refs.chart);
    let option = {
      textStyle: { fontSize: window.chatFontSize },
      color: ['#ffc397', '#beb0f9', '#92d0ff'],
      grid: {
        left: '9%',
        top: '20%',
        width: '82%',
        height: '65%',
      },
      legend: {
        data: this.props.shopNames,
      },
      xAxis: {
        type: 'category',
        data: dataX,
        boundaryGap: false,
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: true, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: false, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      dataZoom: {
        type: 'inside',
        zoomLock: true,
        startValue: dataX.length - 7,
        endValue: dataX.length - 1
      },
      series: series
    }
    this.chart.setOption(option);
  }
  timeTypeOnChange = (value, time) => {
    this.query.timeType = value;
    this.setState({ timeType: value })
    this.getData()
  }
  yearOnChange = (date) => {
    this.query.year = moment(date).year();
    this.setState({ year: moment(date).year() }, () => {
      this.getData()
    })
  }
  render() {
    let { timeType, openStatus, year, loading } = this.state;
    let timeTypedata = [{ name: i18n.get('时'), value: 'hour' }, { name: i18n.get('日'), value: 'day' }, { name: i18n.get('月'), value: 'month' }]
    return <div className="flowHotSpotTimeTopThree">
      <div className="box">
        <div className="boxHead flex-vcenter">
          <div className="title">{i18n.get('热点时段分析')}</div>
          <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
        </div>
        <SelectTimeType value={timeType} data={timeTypedata} onChange={this.timeTypeOnChange} className="mb15" />
        <DatePicker extra={i18n.get("请选择")} locale={{ DatePickerLocale: { year: i18n.get("年"), month: i18n.get("月"), day: i18n.get("日"), hour: i18n.get("时"), minute: i18n.get("分") } }} okText={i18n.get("确定")} dismissText={i18n.get("取消")} mode="year" value={new Date((new Date()).setFullYear(year))} onChange={this.yearOnChange}>
          <div className="selectYear flex-center">
            {i18n.get('年份选择')}:{year}
          </div>
        </DatePicker>
        <div className="chartTitle">{i18n.get('热点时间图')}</div>
        <div className="chart" ref="chart">
          {loading && <div className="loading"></div>}
        </div>
      </div>
    </div>
  }
}

class FlowTrendChartList extends React.Component {
  constructor() {
    super()
    this.state = {
      openStatus: false,
      flowTypeDWMYData: null,
      timeType: 'day',
      loading: true,
      tonghuanbiType: 0
    }
  }
  componentDidMount() {
    let time = timeData.getTimeRange('day');
    this.query = {
      timeType: 'day',
      start: time.start,
      counttype: this.props.counttype, //0-过客量 1-入店量 2-试穿量
      end: time.end,
      dataType: 5,
      dataTypeID: 0
    }
    this.getData()
  }
  getData = async () => {
    let dataYs = [], dataX = [], dataMoms = [], dataYoys = [];
    this.query.counttype = this.props.counttype;
    if (this.chart) {
      this.chart.dispose();
    }
    if (this.storeChart) {
      this.storeChart.dispose();
    }
    this.setState({ loading: true })
    for (const id of this.props.ShopIdList) {
      this.setState({ loading: false })
      this.query.dataTypeID = id.ShopId;
      const response = api('/Flow/FlowTrendChartSameRing', this.query);
      let data = await response;
      dataYs.push(data.data.dataY);
      dataMoms.push(data.data.dataMom);
      dataYoys.push(data.data.dataYoy);
      dataX = data.data.dataX;
    }
    this.dataMoms = dataMoms;
    this.dataYoys = dataYoys;
    this.setChart(dataX, dataYs, dataMoms, dataYoys)
  }
  setChart = (dataX, dataYs, dataMoms, dataYoys) => {
    let series = [];
    this.dataX = dataX;
    dataYs.forEach((item, index) => {
      series.push({
        name: this.props.shopNames[index],
        type: 'line',
        label: { normal: { show: true, color: '#666' } },
        data: item
      })
    });

    let option = {
      textStyle: { fontSize: window.chatFontSize },
      color: ['#ffc397', '#beb0f9', '#92d0ff'],
      legend: {
        data: this.props.shopNames,
      },
      grid: {
        left: '9%',
        top: '20%',
        width: '82%',
        height: '70%',
      },
      xAxis: {
        type: 'category',
        data: dataX,
        boundaryGap: false,
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: true, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: false, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      dataZoom: {
        type: 'inside',
        zoomLock: true,
        startValue: dataX.length - 7,
        endValue: dataX.length - 1
      },
      series: series
    }
    this.chart = echarts.init(this.refs.chart);
    this.chart.setOption(option);

    this.tonghuanbi();
  }
  timeTypeOnChange = (value, time) => {
    this.query.timeType = value;
    this.query.start = time.start;
    this.query.end = time.end;
    this.setState({ timeType: value })
    this.getData()
  }
  open = () => {
    this.setState({ openStatus: !this.state.openStatus }, () => {
      this.storeChart.resize()
    })
  }
  tonghuanbi = () => {
    let colors = ['#ffc397', '#beb0f9', '#92d0ff'];
    let pseries = [];
    this.storeChart = echarts.init(this.refs.pChart);
    if (this.state.tonghuanbiType = 0) {
      this.dataMoms.forEach((item, index) => {
        let data = [];
        item.forEach((value, index) => {
          data[index] = {
            value: parseInt(value),
            label: {
              normal: {
                show: true,
                position: Number(value) >= 0 ? 'top' : 'bottom'
              }
            }
          }
        })
        pseries.push({
          type: 'bar',
          name: this.props.shopNames[index],
          data: data,
          label: {
            normal: {
              show: true,
              formatter: '{c}%'
            }
          },
          itemStyle: {
            normal: {
              color: colors[index]
            }
          }
        })
      });
    } else {
      this.dataYoys.forEach((item, index) => {
        let data = [];
        item.forEach((value, index) => {
          data[index] = {
            value: parseInt(value),
            label: {
              normal: {
                show: true,
                position: Number(value) >= 0 ? 'top' : 'bottom'
              }
            }
          }
        })
        pseries.push({
          type: 'bar',
          name: this.props.shopNames[index],
          data: data,
          label: {
            normal: {
              show: true,
              formatter: '{c}%'
            }
          },
          itemStyle: {
            normal: {
              color: colors[index]
            }
          }
        })
      });
    }
    let option1 = {
      textStyle: { fontSize: window.chatFontSize },
      color: colors,
      grid: {
        left: '9%',
        top: '20%',
        width: '82%',
        height: '70%',
      },
      // legend: {
      //   data: [i18n.get('环比'), i18n.get('同比')],
      //   selectedMode: 'single'
      // },
      legend: {
        data: this.props.shopNames,
      },
      xAxis: {
        type: 'category',
        data: this.dataX,
        boundaryGap: true,
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: true, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false, lineStyle: { color: '#ccc' } },
        splitLine: { show: true, lineStyle: { color: '#ccc' } },
        axisLabel: { show: false, color: '#666', interval: 0 },
        axisLine: { show: true, lineStyle: { color: '#ccc' } },
      },
      dataZoom: {
        type: 'inside',
        zoomLock: true,
        startValue: this.dataX.length - 6,
        endValue: this.dataX.length - 1
      },
      series: pseries
    }
    this.storeChart.setOption(option1);
  }
  render() {
    let { timeType, openStatus, counttype, loading, tonghuanbiType } = this.state;
    return <div className="flowTrendChartSameRing">
      <div className="box">
        <div className="boxHead flex-vcenter">
          <div className="title">{i18n.get('客流走势分析')}</div>
          <div className="unitText flex-g-1">({i18n.get("单位:人次")})</div>
          <div className="open flex-center" onClick={this.open}>{openStatus ? i18n.get('收起') : i18n.get('展开')}<div className={openStatus ? "close_icon" : "open_icon"}></div></div>
        </div>
        <SelectTimeType value={timeType} onChange={this.timeTypeOnChange} className="mb25" />
        <div className="chartTitle">{i18n.get('客流走势分析图')}</div>
        <div className="chart" ref="chart">
          {loading && <div className="loading"></div>}
        </div>
        <div className={openStatus ? "" : "hide"}>
          <div className="chartTitle mb15">{i18n.get('同环比图')}</div>
          <div className="rchart" ref="pChart">
            {loading && <div className="loading"></div>}
          </div>
          <SelectRadioItem data={[{ name: i18n.get('环比'), id: 0 }, { name: i18n.get('同比'), id: 1 }]} value={tonghuanbiType} onChange={(value) => { this.state.tonghuanbiType = value; this.setState({ tonghuanbiType: value }); this.tonghuanbi() }} />
          {/* <div className="flex wrap">
            {this.props.shopNames.map((item, index) => {
              return <div className="flex-center color-block ">
                <span className={"mr5 color-block-" + index} key={item}></span>{item}
              </div>
            })}
          </div> */}
        </div>
      </div>
    </div>
  }
}

class Main extends React.Component {
  constructor() {
    super()
    this.state = {
      ShopIdList: null,
      Shop: null,
      counttype: 1
    }
  }
  componentDidMount() {
    this.ShopList();
  }
  ShopList = () => {
    api('/BaseSet/ShopList').then(data => {
      let ShopIdList = data.data.slice(0, 2)
      this.setState({ Shop: data.data[0], ShopIdList: ShopIdList })
    });
  }
  counttypeOnchange = (value) => {
    this.setState({ counttype: value }, () => {
      this.refs.FlowTrendChartList.getData();
      this.refs.FlowHotSpotTimeList.getData();
      this.refs.FlowActivity.getData();
    })
  }
  shopNameOnChange = (index, shopInfo) => {
    this.state.ShopIdList[index] = shopInfo
    this.setState({}, () => {
      this.refs.FlowTrendChartList.getData();
      this.refs.FlowHotSpotTimeList.getData();
      this.refs.FlowActivity.getData();
      this.refs.FlowPlateauEffectRentTrendChart.getData();
    })
  }
  render() {
    let { counttype, ShopIdList, Shop } = this.state;
    let shopNames = [];
    if (ShopIdList) {
      shopNames = ShopIdList.map(item => {
        return item.ShopName
      })
    }
    return <div id="flow" className="multiStoreFlow">
      <div className="selectItem">
        <div className="flex-vcenter header">
          <div className="icon_zhibiao"></div>
          <div className="name">{i18n.get('选择指标')}</div>
        </div>
        <SelectRadioItem data={[{ name: i18n.get('过客量'), id: 0 }, { name: i18n.get('入店量'), id: 1 }]} value={counttype} onChange={this.counttypeOnchange} />
      </div>
      <div className="selectItem">
        <div className="flex-vcenter header">
          <div className="icon_shop"></div>
          <div className="name flex-g-1">{i18n.get('选择门店')}</div>
          <div className="tipText flex-center">
            <div className="icon_jinggao"></div>{i18n.get('至少选择两家门店')}
          </div>
        </div>
        <SubViewLink moduleName="shopSearch" className="selectStore flex" title={i18n.get('选择店铺')} modelData={{ onChange: (shopInfo) => { this.shopNameOnChange(0, shopInfo) } }}>
          <div className="flex-g-1 selectStoreName"> {(ShopIdList && ShopIdList[0]) ? ShopIdList[0].ShopName : <div style={{ color: '#909090' }}>{i18n.get('选择店铺')}</div>}</div>
          <div className="flex-col-1"> <Icon type="down" /></div>
        </SubViewLink>
        <SubViewLink moduleName="shopSearch" className="selectStore flex" title={i18n.get('选择店铺')} modelData={{ onChange: (shopInfo) => { this.shopNameOnChange(1, shopInfo) } }}>
          <div className="flex-g-1 selectStoreName"> {(ShopIdList && ShopIdList[1]) ? ShopIdList[1].ShopName : <div style={{ color: '#909090' }}>{i18n.get('选择店铺')}</div>}</div>
          <div className="flex-col-1"> <Icon type="down" /></div>
        </SubViewLink>
        <SubViewLink moduleName="shopSearch" className="selectStore flex" title={i18n.get('选择店铺')} modelData={{ onChange: (shopInfo) => { this.shopNameOnChange(2, shopInfo) } }}>
          <div className="flex-g-1 selectStoreName"> {(ShopIdList && ShopIdList[2]) ? ShopIdList[2].ShopName : <div style={{ color: '#909090' }}>{i18n.get('选择店铺')}</div>}</div>
          <div className="flex-col-1"> <Icon type="down" /></div>
        </SubViewLink>
      </div>
      {ShopIdList && <div>
        <FlowTrendChartList ref="FlowTrendChartList" ShopIdList={ShopIdList} counttype={counttype} shopNames={shopNames} />
        <FlowHotSpotTimeList ref="FlowHotSpotTimeList" ShopIdList={ShopIdList} counttype={counttype} shopNames={shopNames} />
        <FlowActivity ref="FlowActivity" ShopIdList={ShopIdList} counttype={counttype} shopNames={shopNames} />
        <FlowPlateauEffectRentTrendChart ref="FlowPlateauEffectRentTrendChart" ShopIdList={ShopIdList} counttype={counttype} shopNames={shopNames} />
      </div>}
    </div>
  }
}


export default Main;